import React from 'react'
import AreaPicker from '@/components/Area/AreaPicker'
import { ImageUploadItem } from 'antd-mobile'
import type {FC} from 'react'
import { sleep } from 'antd-mobile/es/utils/sleep'

const Component:FC = () =>
{
  //创建表单的对象结构
    const [form] = React.UI.Form.useForm()
    const region_text = [React.business.province_text,React.business.city_text,React.business.district_text].filter(v=>v).join('-')
    const code = React.business.province|React.business.city|React.business.district
    //初始化的个人资料数据
    let [business, SetBusiness] = useState({
        nickname: React.business.nickname,
        mobile: React.business.mobile,
        email: React.business.email,
        gender: React.business.gender,
        region_text,
        code,
    })
    //个人头像数据
    let [img, SetImg] = useState<ImageUploadItem[]>([{
        url: React.business.avatar_text
    }])
    let [avatar,SetAvatar] = useState(null)
    //头像删除
    const DelAvatar = () => SetImg([])

    //头像上传
    const upload = async (file:any) =>
    {
        SetAvatar(file)
        return {
            url:URL.createObjectURL(file)
        }
    }

    //地区显示
    let [Area, SetArea] = useState(false)

    //地区确认方法
    const AreaConfirm = (val:any, list:any) => 
    {
        //隐藏地区组件
        SetArea(false)

        var code = ''

        for(var item of val)
        {
            if(item) code = item
        }
        var region_text = ''

        if(list[0]) region_text += `${list[0]}`
        if(list[1]) region_text += `-${list[1]}`
        if(list[2]) region_text += `-${list[2]}`

        //修改数据 对表单中的input元素的值进行数据的修改
        form.setFieldsValue({
            region_text: region_text,
            code: code
        })

    }

    //表单提交方法
    const profile = async (values:any) => {
        values.password || (delete values.password)
        avatar && (values.avatar = avatar)
        let result = await React.request.upload('/business/profile',values)
        result.code?React.toast(result.msg, 'back'):React.toast(result.msg,'','fail')
    }

  return (
    <>
      {/* 地区组件 */}
      <AreaPicker visible={Area} onClose={() => SetArea(false)} onConfirm={AreaConfirm}  />

      {/* 表单结构 */}
      <React.UI.Form
          name="profile"
          layout='horizontal'
          mode='card'
          form={form}
          initialValues={business}
          onFinish={profile}
          footer={<React.UI.Button block type='submit' color='primary' size='large'>提交修改</React.UI.Button>}
      >
          <React.UI.AutoCenter style={{margin: '30px 0px'}}>
              <React.UI.ImageUploader value={img} maxCount={1} onDelete={DelAvatar} onChange={SetImg} upload={upload} />
          </React.UI.AutoCenter>

          <React.UI.Form.Item name="nickname" label="昵称" rules={[{ required: true }]}>
              <React.UI.Input placeholder="请输入昵称" />
          </React.UI.Form.Item>

          <React.UI.Form.Item name="mobile" label="手机号" rules={[{ required: true}, {pattern:/^1[3456789]\d{9}$/, message: '手机号格式不对'}]}>
              <React.UI.Input placeholder="请输入手机号" />
          </React.UI.Form.Item>

          <React.UI.Form.Item name="password" label="密码">
              <React.UI.Input type="password" placeholder="请输入密码" />
          </React.UI.Form.Item>

          <React.UI.Form.Item name="email" label="邮箱" rules={[{ required: true}, {pattern:/^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/, message: '邮箱格式不对'}]}>
              <React.UI.Input placeholder="请输入邮箱" />
          </React.UI.Form.Item>

          <React.UI.Form.Item name="gender" label="性别" rules={[{ required: true }]}>
              <React.UI.Radio.Group>
                  <React.UI.Space direction='horizontal'>
                  <React.UI.Radio value='0'>保密</React.UI.Radio>
                  <React.UI.Radio value='1'>男</React.UI.Radio>
                  <React.UI.Radio value='2'>女</React.UI.Radio>
                  </React.UI.Space>
              </React.UI.Radio.Group>
          </React.UI.Form.Item>

          <React.UI.Form.Item name="region_text" label="地区" onClick={() => SetArea(true)}>
              <React.UI.Input placeholder="请选择地区" readOnly />
          </React.UI.Form.Item>

          <React.UI.Form.Item name="code" label="地区码" hidden={true}>
              <React.UI.Input placeholder="请选择地区" disabled={true}/>
          </React.UI.Form.Item>
      </React.UI.Form>
    </>
  )
}

export default Component